<template>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>个人信息</span>
            </div>
            <div>
                <div class="imgBox">
                    <img :src="admin.face" alt="">
                    <el-upload
                    class="upload-demo"
                    name="images"
                    action="http://localhost:8099/upload-images"
                    :headers="getToken()"
                    :on-success="handleSucess"
                    :limit="1">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </div>
                <div class="item-box">
                    <span><i class="el-icon-user-solid"></i>管理员昵称</span>
                    <span class="data">{{ admin.name }}</span>
                </div>
                <div class="item-box">
                    <span><i class="el-icon-phone"></i>手机号码</span>
                    <span class="data">{{ admin.mobile }}</span>
                </div>
                <div class="item-box">
                    <span><i class="el-icon-s-data"></i>管理员账号</span>
                    <span class="data">{{ admin.account }}</span>
                </div>
                <div class="item-box">
                    <span><i class="el-icon-bank-card"></i>身份证号</span>
                    <span class="data">{{ admin.identificationCard }}</span>
                </div>
                <div class="item-box">
                    <span><i class="el-icon-user"></i>权限角色</span>
                    <span class="data">{{ role.roleName }}</span>
                </div>
                <div class="item-box">
                    <span><i class="el-icon-date"></i>权限字段</span>
                    <span class="data">{{ role.authorityString }}</span>
                </div>
                <div class="item-box">
                    <span><i class="el-icon-time"></i>创建时间</span>
                    <span class="data">{{ admin.createTime }}</span>
                </div>
            </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>基本资料</span>
            </div>
            <el-tabs v-model="activeName">
                <el-tab-pane label="完善信息" name="first">
                    <el-form ref="ruleForm" label-width="100px" :rules="rules" class="demo-ruleForm">
                        <el-form-item label="管理员名称" prop="name">
                            <el-input v-model="admin.name" readonly ></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="identiificationCard">
                            <el-input v-model="admin.identificationCard"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="change()">确认修改</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="修改密码" name="second">
                    <el-form label-width="100px" class="demo-ruleForm">
                        <el-form-item label="请输入旧密码">
                            <el-input v-model="oldPassword" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="请输入新密码">
                            <el-input v-model="newPassword" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="请确认新密码">
                            <el-input v-model="repeatPassword" type="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="changePassword()">确认修改</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>


        </el-card>
      </el-col>
    </el-row>
</template>

<script>
export default {
    name:"adminInfo",
    data(){
        return{
            role:null,
            admin:null,
            activeName:'first',
            oldPassword:'',
            newPassword:'',
            repeatPassword:'',
            rules: {
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                identiificationCard: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                    { min: 15, max: 18, message: '长度在 15 到 18 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    mounted(){
        this.init();
    },
    methods:{
        
        changePassword(){
            this.$request.post("/admin/changePassword",{
                oldPassword:this.oldPassword,
                newPassword:this.newPassword,
                repeatPassword:this.repeatPassword,
            })
            .then(res=>{
                if(res.status==400){
                    this.$message.error(res.msg)
                }else if(res.status == 200){
                    this.$message.success("更新成功")
                }
            })
            .catch(err =>{
                console.log(err)
            })
        },
        handleSucess(e){
            console.log(e)
            this.admin.face = e.data[0]
            this.change()
        },
        change(){
            this.$request.post("/admin/changeAdmin",this.admin)
            .then(res=>{
                this.$message.success("修改成功")
                this.init()
            })
            .catch(err =>{
                console.log(err)
            })
        },
        getToken(){
            let token = JSON.parse(localStorage.getItem('admin')).token
            return{'token':token}
        },
        init(){
            this.$request.get("/admin/getAdminById",{
                params:{
                    id:JSON.parse(localStorage.getItem("admin")).id
                }
            }).then(res=>{
                this.role = res.data.role
                this.admin = res.data.admin
            })
            .catch(err=>{
                cons
            })
        }
    }
}
</script>

<style>
 .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .imgBox{
    overflow: hidden;
    /* height: 200px; */
    border-bottom: 1px solid #f8f8f8;
    padding-bottom: 10px;
  }
  .imgBox img{
    display: block;
    width: 180px;
    height: 180px;
    margin: 10px auto;
    border-radius: 50%;
  }
  .item-box{
    border-bottom: 1px solid #f8f8f8;
    padding: 15px;
  }
  .data{
    float: right;
  }
</style>